<template>
  <div class="lunbo">
    <div class="container">
      <div>
        <span></span>
        <router-link to="/">王者荣耀首页</router-link>
        <span> > 攻略中心</span>
      </div>
      <div>
        <div class="left">
          <img
            v-if="cur == 1"
            src="https://ossweb-img.qq.com/upload/adw/image/194/20210325/84460cc1f59dab9f34343a04388fdfd5.jpeg"
            alt=""
          />
          <img
            v-else-if="cur == 2"
            src="	https://ossweb-img.qq.com/upload/adw/image/194/20210521/cb2dd275998dd0278d71885826790008.jpeg"
            alt=""
          />
          <img
            v-else-if="cur == 3"
            src="	https://ossweb-img.qq.com/upload/adw/image/194/20210604/0ba3d77e75b8a66647ba931b0d26284f.jpeg"
            alt=""
          />
          <div>
            <span :class="{ cur: cur == 1 }" @mouseover="cur = 1"
              >尘夏纪录片</span
            >
            <span :class="{ cur: cur == 2 }" @mouseover="cur = 2"
              >无所畏惧捧荣耀</span
            >
            <span :class="{ cur: cur == 3 }" @mouseover="cur = 3"
              >RW侠《少侠行》</span
            >
          </div>
        </div>
        <div class="right">
          <div class="top">
            <span @mouseover="cur1 = 1" :class="{ cur: cur1 == 1 }">视 频</span>
            <span @mousemove="cur1 = 2" :class="{ cur: cur1 == 2 }">图 文</span>
          </div>
          <div class="body">
            <raiders-gonggao :data="arr" :title="title" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RaidersGonggao from "./RaidersGonggao.vue";
export default {
  components: { RaidersGonggao },
  watch: {
    cur1(n) {
      if (n == 1) {
        this.title = "输入关键字搜索更多视频";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=20&logic=or&typeids=1%2C2&exclusiveChannel=4&exclusiveChannelSign=1009cf6f0fd65334a005ee0bd58b7160&time=1649147600&tagids=932"
          )
          .then((res) => {
            console.log(res.data.data.items);
            this.arr = res.data.data.items;
          });
      } else if (n == 2) {
        this.title = "输入关键字搜索更多图文攻略";
        this.axios
          .get(
            "api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=20&logic=or&typeids=1%2C2&exclusiveChannel=4&exclusiveChannelSign=1c1fa25762b9be38257defa38f1827ff&time=1649151149&tagids=931"
          )
          .then((res) => {
            this.arr = res.data.data.items;
          });
      }
    },
  },
  data() {
    return {
      cur: 1,
      cur1: 1,
      arr: [],
      title: "输入关键字搜索更多视频",
    };
  },
  mounted() {
    setInterval(() => {
      this.cur++;
      if (this.cur == 4) {
        this.cur = 1;
      }
    }, 4000);
    this.axios
      .get(
        "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=20&logic=or&typeids=1%2C2&exclusiveChannel=4&exclusiveChannelSign=1009cf6f0fd65334a005ee0bd58b7160&time=1649147600&tagids=932"
      )
      .then((res) => {
        console.log(res.data.data.items);
        this.arr = res.data.data.items;
      });
  },
};
</script>

<style lang="scss" scoped>
.lunbo {
  background-image: linear-gradient(
    0deg,
    rgb(238, 239, 246) 0,
    rgb(213, 218, 230) 100%
  );
  // height: 1000px;
  .container {
    // border: 1px solid red;
    width: 1200px;
    // height: 100px;
    margin: 0 auto;
    > div:first-child {
      padding-top: 20px;
      margin-bottom: 20px;
      .router-link-active {
        color: gray;
        background-repeat: no-repeat;
        background-image: url("/public/img/icon-bg.png");
        background-position: -8px -80px;
        padding-left: 24px;
      }
      color: gray !important;
    }
    > div:nth-child(2) {
      display: flex;
      width: 1200px;
      height: 362px;
      background-color: rgb(54, 54, 61);
      .left {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        > div {
          span {
            cursor: pointer;
            font-size: 14px;
            color: white;
            display: inline-block;
            // border: 1px solid red;
            line-height: 44px;
            width: 144px;
            text-align: center;
            &.cur {
              background-color: rgb(84, 84, 90);
              color: rgb(243, 194, 88);
            }
          }
        }
      }
      .right {
        padding: 0 16px;
        // border: 1px solid red;
        width: calc(1200px - 716px);
        .top {
          font-size: 14px;
          //   border: 1px solid red;
          border-bottom: 2px solid gray;
          span {
            cursor: pointer;
            color: white;
            // border: 1px solid blue;
            line-height: 51px;
            padding: 0 12px;
            display: inline-block;
            &.cur {
              color: rgb(243, 194, 88);
              border-bottom: 3px solid rgb(243, 194, 88);
            }
          }
        }
      }
    }
  }
}
</style>